<template>
  <van-cell
    v-if="type === 'config-mobile' || type === 'mobile'"
    class="van-field-cell"
    title-class="van-field__label"
    :required="config.required"
  >
    <template #title>
      <span class="">{{ config.title }}</span>
    </template>
    <template #value>
      <AUploadInput
        :imageStyle="{
          width: '40px',
          height: '40px'
        }"
        v-model="input"
        type="image"
        @change="onChange"
      />
    </template>
  </van-cell>
  <div v-if="type === 'config-table' || type === 'table'" class="v-form-item-wrapper">
    <div class="form-item">
      <AUploadInput v-model="input" type="image" @change="onChange" />
      <div v-if="config.required" class="required">*</div>
    </div>
    <pre v-if="config.tips"><i class="icon iconfont">&#xe77e;</i>{{ config.tips }}</pre>
  </div>
</template>

<script setup lang="ts">
const emits = defineEmits(['update'])
const props = defineProps<{
  id: string
  tdId: string
  formType: string
  formTypeName: string
  config: any

  type: string // form配置编辑 table表格表单 mobile移动端表单
  formValue: string
}>()
const input = ref<string>('')
const onChange = () => {
  if (input.value.length) {
    emits('update', input.value)
  }
}
onMounted(() => {
  input.value = props.formValue
})
</script>

<style lang="scss" scoped>
.van-field-cell {
  margin-left: 6px;
  &.van-cell--required:before {
    left: 10px;
  }
}
</style>
